<template>
    <div class="home">
        <div class="home-ipt">
            <div class="ipt-nav">
                <el-input v-model="input" placeholder="Please input" style="width: 30%" />
                <el-button type="primary" @click="includeClick(input)">搜索</el-button>
            </div>
            <div class="home-add">
                <el-button @click="open" type="success">新增</el-button>
            </div>
        </div>

        <el-table :data="list" style="width: 95%">
            <el-table-column prop="name" label="名字" width="100" />
            <el-table-column prop="id" label="ID" width="200" />
            <el-table-column prop="date" label="时间" />
            <el-table-column prop="tal" label="电话" />
            <el-table-column prop="city" label="城市" />
            <el-table-column prop="pic" label="滞纳金" />
            <el-table-column prop="title" label="备注" />
            <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger" @click.prevent="deleteRow(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="tiao" v-model:page-size="pageSize" v-model:current-page="page" @click="pageSizes()"/>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
interface listType {
    name: string,
    date: string,
    title: string,
    city: string,
    tal: string,
    pic: string,
    id: string
}
const list = ref<listType[]>([])
const input = ref('')
const pageSize=ref<number>(10)
const page=ref<number>()
const tiao=ref<number>()
const getListAxios = async () => {
    const resp = await axios.get('/api/list')
    list.value = resp.data.list
    tiao.value=resp.data.tiao
}
const deleteRow = async (id: string) => {
    const resp = await axios.get('/api/teled/' + id)
    const { code } = resp.data
    if (code === 200) {
        getListAxios()
    }
}
const pageSizes=async()=>{
    const resp = await axios.get('/api/list', { params: { page:page.value,pageSize:pageSize.value } })
    list.value = resp.data.list
    tiao.value=resp.data.tiao
}
const includeClick = async (input: string) => {
    const resp = await axios.get('/api/list', { params: { input: input } })
    list.value = resp.data.list
    tiao.value=resp.data.tiao
}

const open = () => {
    ElMessageBox.alert('This is a message', '新增信息', {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: 'OK',
        callback: (action: Action) => {
            ElMessage({
                type: 'info',
                message: `action: ${action}`,
            })
        },
    })
}



onMounted(() => {
    getListAxios()
})
</script>
<style lang="scss">
.home {
    width: 100%;
    height: 100%;
}

.home-ipt {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ipt-nav {
    width: 35%;
}

.home-add {
    margin-right: 100px;
}
</style>